<!--
	the program view
-->

<div id="programDiv">
    <!-- Date-picker start -->
    <div class="row">
        <div class="row ">
            <div ng-click="setActive('thursday')" id="thursdayDiv" class="col-xs-5 col-xs-offset-1 text-center date-picker" ng-class="{activeDay : isActive('thursday')}">
                THU 5.3
            </div>
            <div ng-click="setActive('friday')" id="fridayDiv" class="col-xs-5 text-center date-picker" ng-class="{activeDay : isActive('friday')}">
                FRI 6.3
            </div>
        </div>
        <div class="row">
            <div ng-click="setActive('saturday')" id="saturdayDiv" class="col-xs-5 col-xs-offset-1 text-center date-picker" ng-class="{activeDay : isActive('saturday')}">
                SAT 7.3
            </div>
            <div ng-click="setActive('sunday')" id="sundayDiv" class="col-xs-5 text-center date-picker" ng-class="{activeDay : isActive('sunday')}">
                SUN 8.3
            </div>
        </div>
    </div><!-- Date-picker end -->
    <br>
    <!-- The venue div -->
    <div id="venueDiv">
        <div class="text-center venue-div" ng-repeat="venue in venues">
            <span class="" style="font-size:16px;">{{ venue.venue_name }}</span>
        </div>
    </div>
    
    <div id="wrapper">
	<div id="scroller">
            <ul>
                <li>
                    <div id="timeDiv">
                        <ul>
                            <li>00:00</li><li>01:00</li><li>02:00</li><li>03:00</li><li>04:00</li><li>05:00</li><li>06:00</li><li>07:00</li><li>08:00</li><li>09:00</li><li>10:00</li><li>11:00</li><li>12:00</li><li>13:00</li><li>14:00</li><li>15:00</li><li>16:00</li><li>17:00</li><li>18:00</li><li>19:00</li><li>20:00</li><li>21:00</li><li>22:00</li><li id="lastListTime">23:00</li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div ng-repeat="day in days" role="tabpanel" class="tab-pane" id="{{ day }}" ng-class="{active : isActive('{{ day }}')}">
                            <div id="eventTimelines" class="tab-content">
                                <div ng-repeat="venue in venues" ng-class-odd="'timelineOdd'" ng-class-even="'timelineEven'" class="event-timeline">
                                    <div ng-repeat="event in events | filter:matchVenue(venue) | filter:matchDay(day)" class="timeline-event" style="margin-top:{{ event.event_margin_top }}px;width:{{ event.event_width }}px;margin-left:{{ event.event_margin_left }}px;">
                                        <p>
                                            <a class="text-white" href="#/events/{{ event.event_id }}">
                                                {{ event.event_start_time }}-{{ event.event_end_time }}<br>
                                                {{ event.event_description }}
                                            </a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
	</div>
    </div>
    
    <div id="scrollSpace"></div>
</div>